<template>
  <div>
    <h2>Home组件内容</h2>
    <div>
      <ul class="nav nav-tabs">
        <li>
          <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
        </li>
        <li>
          <router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
        </li>
      </ul>
      <!-- 
        keep-alive标签：缓存路由组件，让不展示的路由保持挂载（跳掉另一个路由后，指定的路由仍挂载），不被销毁。
          include属性：填写需要缓存的组件名称； 若不写该属性，默认该组件下所有的路由跳转全部缓存。
          ps：keep-alive标签必须包裹router-view标签
      -->
      <!-- 缓存一个路由组件 -->
      <keep-alive include="News">
        <router-view></router-view>
      </keep-alive>

      <!-- 缓存多个路由组件 -->
      <!-- <keep-alive :include="['News','Message']">
        <router-view></router-view>
      </keep-alive> -->
    </div>
  </div>
</template>

<script>
    export default {
        name:'Home',
        // mounted(){
        //   console.log("Home组件挂载完毕")
        // },
        // beforeDestroy(){
        //   console.log("Home组件即将被销毁了")
        // }
    }
</script>